<!doctype html>
<html lang="en">
<head>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	%>
	<base href="<%=basePath%>">
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="apple-touch-icon" sizes="76x76" href="" />
	<link rel="icon" type="image/png" href="" />
	<title>我要寄件</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
	<link href="css/paper-bootstrap-wizard.css" rel="stylesheet" />

	<!-- Fonts and Icons -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
	<link href="css/iconfont.css" rel="stylesheet">
	
	<!-- js  -->
</head>

<body>
	<div class="image-container set-full-height" style="background-color:#DDDDDD">
	    
		<!--  change language  -->
		<a href="#" class="made-with-pk">
			<div class="brand">语言</div>
			<div class="made-with"><strong>简体中文 </strong>&ensp;英语（EN）</div>
		</a>
		
	    <!--   Big container   -->
	    <div class="container">
	        <div class="row">
		        <div class="col-sm-8 col-sm-offset-2">

		            <!--      Wizard container        -->
		            <div class="wizard-container">
		                <div class="card wizard-card" data-color="green" id="wizard">
		                <form action="${pageContext.request.contextPath }/member/pagemessage" method="post">
		                <!--        You can switch " data-color="green" "  with one of the next bright colors: "blue", "azure", "orange", "red"       -->

		                    	<div class="wizard-header">
		                        	<h3 class="wizard-title">我要寄件</h3>
		                        	<p class="category">标*为必填项</p>
		                    	</div>
								<div class="wizard-navigation">
									<div class="progress-with-circle">
									    <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="4" style="width: 15%;"></div>
									</div>
									<ul>
			                            <li>
											<a href="#sender" data-toggle="tab">
												<div class="icon-circle">
													<i class="iconfont icon-jikuaidi"></i>
												</div>
												寄件人信息
											</a>
										</li>
			                            <li>
											<a href="#receiver" data-toggle="tab">
												<div class="icon-circle">
													<i class="iconfont icon-huabankaobei-"></i>
												</div>
												收件人信息
											</a>
										</li>
			                            <li>
											<a href="#express" data-toggle="tab">
												<div class="icon-circle">
													<i class="iconfont icon-kuaidi"></i>
												</div>
												快件信息
											</a>
										</li>
			                            <li>
											<a href="#pay" data-toggle="tab" id="eval">
												<div class="icon-circle">
													<i class="iconfont icon-fufeizhifu"></i>
												</div>
												快递收费
											</a>
										</li>
			                        </ul>
								</div>
		                        <div class="tab-content">
		                            <div class="tab-pane" id="sender">
		                            	<div class="row">
		                                	<div class="col-sm-12">
		                                    	<h5 class="info-text"> 寄方信息 </h5>
		                            		</div>
		                                	<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>姓名</label>
		                                        	<input type="text" class="form-control" name="sender" placeholder="请填写联系人姓名" minlength="3" required>
		                                    	</div>
		                                	</div>
											<div class="col-sm-5">
		                                    	<div class="form-group">
		                                            <label><span style="color:red;">* </span>省市区</label><br>
		                                            <select name="slocal" class="form-control" required>
														<option disabled selected hidden>请选择所在地区</option>		                                                
		                                                <option value="北京市"> 北京市 </option>
		                                                <option value="上海市 "> 上海市 </option>
		                                                <option value="天津市"> 天津市 </option>
		                                                <option value="重庆市"> 重庆市 </option>
		                                                <option value="黑龙江省"> 黑龙江省 </option>
		                                                <option value="吉林省"> 吉林省 </option>
		                                                <option value="辽宁省"> 辽宁省 </option>
		                                                <option value="河北省"> 河北省 </option>
														<option value="新疆省"> 新疆省 </option>
														<option value="甘肃省"> 甘肃省 </option>
														<option value="青海省"> 青海省 </option>
														<option value="陕西省"> 陕西省 </option>
														<option value="宁夏回族自治区"> 宁夏回族自治区 </option>
														<option value="河南省"> 河南省 </option>
														<option value="山东省"> 山东省 </option>
														<option value="山西省"> 山西省 </option>
														<option value="安徽省"> 安徽省 </option>
														<option value="湖北省"> 湖北省 </option>
														<option value="江苏省"> 江苏省 </option>
														<option value="四川省"> 四川省 </option>
														<option value="贵州省"> 贵州省 </option>
														<option value="云南省"> 云南省 </option>
														<option value="广西壮族自治区"> 广西壮族自治区 </option>
														<option value="西藏自治区"> 西藏自治区 </option>
														<option value="浙江省"> 浙江省 </option>
														<option value="江西省"> 江西省 </option>
														<option value="广东省"> 广东省 </option>
														<option value="福建省"> 福建省 </option>
														<option value="台湾省"> 台湾省 </option>
														<option value="海南省"> 海南省 </option>
														<option value="香港特别行政区"> 香港特别行政区 </option>
														<option value="澳门特别行政区"> 澳门特别行政区 </option>
		                                            </select>
		                                        </div>
		                                	</div>
											<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>手机号码</label>
		                                        	<input type="text" class="form-control" name="scellphone" placeholder="请填写手机号码" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" required>
		                                    	</div>
		                                	</div>
		                                	<div class="col-sm-5">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>详细地址</label>
		                                            	<input type="text" class="form-control" name="sdetailedlocal" placeholder="请填写所在街区" required>
		                                    	</div>
		                                	</div>
		                            	</div>
		                            </div>
		                            <div class="tab-pane" id="receiver">
		                            	<div class="row">
		                                	<div class="col-sm-12">
		                                    	<h5 class="info-text"> 收方信息 </h5>
		                            		</div>
		                                	<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>姓名</label>
		                                        	<input type="text" class="form-control"  name="receiver" placeholder="请填写联系人姓名" required>
		                                    	</div>
		                                	</div>
											<div class="col-sm-5">
		                                    	<div class="form-group">
		                                            <label><span style="color:red;">* </span>省市区</label><br>
		                                            <select name="rlocal" class="form-control" required>
														<option disabled selected hidden>请选择所在地区</option>		                                                
		                                                <option value="北京市"> 北京市 </option>
		                                                <option value="上海市 "> 上海市 </option>
		                                                <option value="天津市"> 天津市 </option>
		                                                <option value="重庆市"> 重庆市 </option>
		                                                <option value="黑龙江省"> 黑龙江省 </option>
		                                                <option value="吉林省"> 吉林省 </option>
		                                                <option value="辽宁省"> 辽宁省 </option>
		                                                <option value="河北省"> 河北省 </option>
														<option value="新疆省"> 新疆省 </option>
														<option value="甘肃省"> 甘肃省 </option>
														<option value="青海省"> 青海省 </option>
														<option value="陕西省"> 陕西省 </option>
														<option value="宁夏回族自治区"> 宁夏回族自治区 </option>
														<option value="河南省"> 河南省 </option>
														<option value="山东省"> 山东省 </option>
														<option value="山西省"> 山西省 </option>
														<option value="安徽省"> 安徽省 </option>
														<option value="湖北省"> 湖北省 </option>
														<option value="江苏省"> 江苏省 </option>
														<option value="四川省"> 四川省 </option>
														<option value="贵州省"> 贵州省 </option>
														<option value="云南省"> 云南省 </option>
														<option value="广西壮族自治区"> 广西壮族自治区 </option>
														<option value="西藏自治区"> 西藏自治区 </option>
														<option value="浙江省"> 浙江省 </option>
														<option value="江西省"> 江西省 </option>
														<option value="广东省"> 广东省 </option>
														<option value="福建省"> 福建省 </option>
														<option value="台湾省"> 台湾省 </option>
														<option value="海南省"> 海南省 </option>
														<option value="香港特别行政区"> 香港特别行政区 </option>
														<option value="澳门特别行政区"> 澳门特别行政区 </option>
		                                            </select>
		                                        </div>
		                                	</div>
											<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>手机号码</label>
		                                        	<input type="text" class="form-control"  name="rcellphone" placeholder="请填写手机号码" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" required>
		                                    	</div>
		                                	</div>
		                                	<div class="col-sm-5">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>详细地址</label>
		                                            	<input type="text" class="form-control" name="rdetailedlocal" placeholder="请填写所在街区" required>
		                                    	</div>
		                                	</div>
		                            	</div>
		                            </div>
		                            <div class="tab-pane" id="express">
		                                <div class="row">
		                                    <h5 class="info-text"> 快件信息 </h5>
											<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group">
		                                            <label><span style="color:red;">* </span>上门取件</label><br>
		                                            <select name="gettime" class="form-control" required>
														<option disabled selected hidden>当前时间</option>		                                                
		                                                <option value="24h"> 24h内 </option>
														<option value="48h"> 48h内 </option>
		                                            </select>
		                                        </div>
		                                	</div>
											<div class="col-sm-5">
		                                    	<div class="form-group">
		                                            <label><span style="color:red;">* </span>寄托物类型</label><br>
		                                            <select name="type" id="type" class="form-control" required>
														<option disabled selected hidden>请选择寄托物类型</option>
		                                                <option value="电子产品"> 电子产品 </option>
														<option value="食物生鲜"> 食物生鲜 </option>
														<option value="精密仪器"> 精密仪器 </option>
														<option value="大型工具"> 大型工具 </option>
														<option value="其他"> 其他 </option>
		                                            </select>
		                                        </div>
		                                	</div>
											<div class="col-sm-5 col-sm-offset-1">
		                                    	<div class="form-group">
		                                        	<label><span style="color:red;">* </span>预估重量</label>
													<div class="input-group">
		                                        	<input type="text" class="form-control" id="weight" name="weight" required>
													<span class="input-group-addon">Kg</span>
													</div>
		                                    	</div>
		                                	</div>
											<div class="col-sm-5">
		                                    	<div class="form-group">
		                                        	<label>件数</label>
													<div class="input-group">
		                                        	<input type="text" class="form-control" id="count" name="count">
													<span class="input-group-addon">件</span>
													</div>
		                                    	</div>
		                                	</div>
											<div class="col-sm-10 col-sm-offset-1">
		                                        <label><span style="color:red;">提示：如有多个货物请填写总的重量，最终实际收费以收派员实际上门秤量为准 </span></label>	
		                                	</div>
		                                    <div class="col-sm-10 col-sm-offset-1">
		                                        <div class="form-group">
		                                            <label>备注</label>
		                                            <textarea class="form-control" name="remark" placeholder="" rows="2"></textarea>
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
									<div class="tab-pane" id="pay">
		                                <div class="row">
		                                    <h5 class="info-text"> 运费结算 </h5>
		                                    <h4 style="text-align:center;"><label><span style="color:green;" id="paycount"> </span>￥</label></h4>
		                                    <div class="col-sm-10 col-sm-offset-1" style="text-align:center;">
		                                        <input type="hidden"  id="payvalue" name="pay" >	
		                                	</div>
											<div class="col-sm-10 col-sm-offset-1" style="text-align:center;">
											<label id="paycode"></label>
		                                	</div>
		                                    
		                                </div>
		                            </div>
		                        </div>
		                        <div class="wizard-footer">
	                            	<div class="pull-right">
	                                    <input type='button' class='btn btn-next btn-fill btn-success btn-wd' name='next' value='下一步' />
	                                    <input type='submit' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='完成' />
									</div>

	                                <div class="pull-left">
	                                    <input type='button' class='btn btn-previous btn-default btn-wd' name='previous' value='上一步' />
	                                </div>
	                                <div class="clearfix"></div>
		                        </div>
		                    </form>
		                </div>
		            </div> <!-- wizard container -->
		        </div>
	        </div> <!-- row -->
	    </div> <!--  big container -->

	    <div class="footer">
	        <div class="container text-center">
	            Copyright &copy; 2020	顺丰速运 版权所有
	        </div>
	    </div>
	</div>

</body>

	<!--   Core JS Files   -->
	<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
	<script src="js/jquery.qrcode.min.js" type="text/javascript"></script>
	<script src="js/constraint.js" type="text/javascript"></script>
	<!--  Plugin for the Wizard -->
	<script src="js/paper-bootstrap-wizard.js" type="text/javascript"></script>
	
	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="js/jquery.validate.min.js" type="text/javascript"></script>
</html>
